<template>
	<view class="synthesis-box-page">
		<detail-head url="/pages/mine/mine" type="none"></detail-head>
		<view class="content">
			<view class="head">
				<app-title text="作品合成"></app-title>
				<view class="rule" @click="openPopup('hintRef')">合成规则</view>
			</view>
			<uni-data-checkbox selectedColor="#FFBD47" v-model="value" mode="button" :localdata="range"
				@change="synthesisChange"></uni-data-checkbox>
			<view class="synthetic-process"></view>
			<view class="synthetic-prize">
				<image class="prize-img" v-if="imgUrl!==''" :src="imgUrl" mode=""></image>
			</view>
			<button class="btn" type="default" @click="onSynthesisClick">立即合成</button>
		</view>
		<uni-popup ref="hintRef" type="bottom">
			<view class="popup">
				<view class="title">合成规则</view>
				<!-- 	<view class="item"><text> 主公: </text> 每国五个武将合成一个主公 </view>
				<view class="item"><text> 坐骑: </text> 每国25个小兵合成一个坐骑 </view>
				<view class="item"><text> 司马炎: </text> 刘备+孙权+曹操 </view> -->
				<!-- 		<view class="item"><text> N卡全家福瑞雅: </text> 7张N卡VIVIAN </view>
				<view class="item"><text> N卡全家福薇薇安: </text> 7张N卡 </view>
				<view class="item"><text> R卡全家福贝拉: </text> 5张R卡 BELLE </view>
				<view class="item"><text> SR卡全家福南茜: </text> 4张SR卡 NANCY </view> -->
				<view class="item">
					<text class="label">方染之-溪光绕翠 =</text>
					<text class="value">
						方染之-大河东去、<br>
						方染之-大好河山、<br>
						方染之-江流秋声、<br>
						方染之-江村翠色、<br>
						方染之-江山如故、<br>
						任意25张 + 方染之-山里家人
					</text>
				</view>
				<!-- 			<view class="item"><text> 龙: </text> 1*虎+1*虎 </view>
				<view class="item"><text> 玄武: </text> 6*鹿 </view>
				<view class="item"><text> 凤凰: </text> 4*熊+1*象 </view>
				<view class="item"><text> 齐天大圣: </text> 1*金圣+1*木圣+1*水圣+1*火圣+1*土圣 </view>
				<view class="item"><text> 斗战胜佛: </text> 5*齐天大圣 </view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		composite
	} from '../../request/synthesis-api.js'
	export default {
		data() {
			return {
				imgUrl: '',
				value: 17,
				range: [
					// {
					// 	"show": false,
					// 	"value": 0,
					// 	"text": "龙",
					// 	"type": 'DRAGON'

					// }, {
					// 	"show": false,
					// 	"value": 1,
					// 	"text": "玄武",
					// 	"type": 'XUANWU'
					// }, {
					// 	"show": false,
					// 	"value": 2,
					// 	"text": "凤凰",
					// 	"type": 'SUZAKU'
					// },
					// {
					// 	"show": false,
					// 	"value": 3,
					// 	"text": "齐天大圣",
					// 	"type": 'MONKEYKING'
					// }, {
					// 	"show": false,
					// 	"value": 4,
					// 	"text": "斗战胜佛",
					// 	"type": 'FIGHTOVERBUDDHA'
					// }, 
					// {
					// 	"show": true,
					// 	"value": 5,
					// 	"text": "蜀主公",
					// 	"type": 'SHUKING'
					// }, {
					// 	"show": true,
					// 	"value": 6,
					// 	"text": "蜀坐骑",
					// 	"type": 'SHUMOUNT'
					// }, {
					// 	"show": true,
					// 	"value": 7,
					// 	"text": "吴主公",
					// 	"type": 'WUKING'
					// }, {
					// 	"show": true,
					// 	"value": 8,
					// 	"text": "吴坐骑",
					// 	"type": 'WUMOUNT'
					// }, {
					// 	"show": true,
					// 	"value": 9,
					// 	"text": "魏主公",
					// 	"type": 'WEIKING'
					// }, {
					// 	"show": true,
					// 	"value": 10,
					// 	"text": "魏坐骑",
					// 	"type": 'WEIMOUNT'
					// },{
					// 	"show": true,
					// 	"value": 11,
					// 	"text": "司马炎",
					// 	"type": 'SIMAYAN'
					// },
					// {
					// 	"show": true,
					// 	"value": 12,
					// 	"text": "N卡全家福薇薇安",
					// 	"type": 'VIVIAN'
					// },
					// {
					// 	"show": true,
					// 	"value": 13,
					// 	"text": "N卡全家福瑞雅",
					// 	"type": 'RAYA'
					// },
					// {
					// 	"show": true,
					// 	"value": 14,
					// 	"text": "R卡全家福贝拉",
					// 	"type": 'BELLE'
					// },
					// {
					// 	"show": true,
					// 	"value": 15,
					// 	"text": "SR卡全家福南茜",
					// 	"type": 'NANCY'
					// },
					// {
					// 	"show": true,
					// 	"value": 16,
					// 	"text": "女团全家福",
					// 	"type": 'GIRLGROUP'
					// },
					{
						"show": true,
						"value": 17,
						"text": "方染之（溪光绕翠）",
						"type": 'PAINTING'
					},

				],
				selected: {
					"value": 17,
					"text": "方染之（溪光绕翠）",
					"type": 'PAINTING'
				},
			}
		},
		created() {
			if (!this.config.isOpenComposite) {
				uni.showToast({
					title: '通道暂时关闭，请耐心等待',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '../mine/mine'
					})
				}, 500)
			}
		},
		methods: {
			// 打开弹框
			openPopup(val) {
				this.$refs[val].open('buttom')
			},

			// 关闭弹框
			closePopup(val) {
				this.$refs[val].close()
			},

			// 类型改变
			synthesisChange(e) {
				this.imgUrl = ''
				this.selected = e.detail.data
			},

			// 合成提交
			async onSynthesisClick() {
				uni.showLoading({
					title: '合成中...'
				})
				try {
					let {
						code,
						message,
						data
					} = await composite(this.selected.type)
					if (code === 200) {
						uni.hideLoading()
						this.payPwd = ''
						uni.showToast({
							title: '合成成功',
							icon: 'success'
						})
						this.imgUrl = data
					} else {
						uni.hideLoading()
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.synthesis-box-page {
		width: 100%;
		min-height: 100vh;
		background: $login-background-url no-repeat;
		background-size: 100% auto;
		background-position: 0 -60rpx;
	}

	.content {
		width: 100%;
		padding: 100rpx 20rpx 20rpx 20rpx;

		.head {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.rule {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #979797;
			}
		}

		/deep/ .checklist-group {
			display: flex;
			justify-content: space-around;

			.radio__inner {
				margin-left: 10rpx !important;
			}

			.checklist-box {
				width: 350rpx;
				height: 88rpx;
				padding: 0 !important;
				margin: 0 0 40rpx 0 !important;
				justify-content: center !important;
				border-radius: 22rpx !important;
			}

			.checklist-content {
				flex: 1 !important;
				max-width: 280rpx;
			}

			.checklist-text {
				// text-wrap: ;
				word-break: break-all;
			}
		}

		/deep/ .checklist-content {
			flex: none !important;

		}

		.synthetic-process {
			width: 100%;
			height: 32px;
			background: $common-process-url no-repeat;
			background-size: 24px 27px;
			background-position: center center;
			margin: 20px 0;
		}

		.synthetic-prize {
			width: 168px;
			height: 168px;
			background: $common-result-url no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			margin-bottom: 50px;
			background-color: #808080;
			border-radius: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.btn {
			width: 684rpx;
			height: 88rpx;
			margin: 0 auto;
			line-height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
			font-size: 14px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}
	}

	.popup {
		width: 100%;
		min-height: 400rpx;
		padding: 0 40rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.title {
			line-height: 60rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
		}

		.item {
			width: 100%;
			text-align: left;
			font-size: 12px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #979797;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			margin: 10rpx 0;

			.label {
				width: 220rpx;
			}

			.value {
				flex: 1;
				line-height: 40rpx;
			}
		}
	}
</style>
